<template>
    <div class="main">
      <h4>警情查询</h4>
      <hr />
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 时间选择器 -->
        <el-form-item label="请选择时间">
          <el-date-picker
          v-model="formInline.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
          </el-date-picker>
        </el-form-item>

        <!-- 选择车辆 -->
        <el-form-item label="选择车辆">
          <el-input v-model="formInline.car" placeholder="请选择" readonly @click.native="dialogCarVisible=true"></el-input>
        </el-form-item>

        <!-- 报警来源 -->
        <el-form-item label="报警来源">
          <el-select v-model="formInline.source">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="设备" value="设备"></el-option>
            <el-option label="平台" value="平台"></el-option>
          </el-select>
        </el-form-item>

        <!-- 处理情况 -->
        <el-form-item label="处理情况">
          <el-select v-model="formInline.handle">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="未处理" value="未处理"></el-option>
            <el-option label="已处理" value="已处理"></el-option>
          </el-select>
        </el-form-item>

        <!-- 上报状态 -->
        <el-form-item label="上报状态">
          <el-select v-model="formInline.state">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="未上报" value="未上报"></el-option>
            <el-option label="处理中" value="处理中"></el-option>
            <el-option label="处理完成" value="处理完成"></el-option>
            <el-option label="不处理" value="不处理"></el-option>
            <el-option label="将来处理" value="将来处理"></el-option>
          </el-select>
        </el-form-item>

        <!-- 报警时长  -->
        <el-form-item label="报警时长">
          <el-input v-model="formInline.time" placeholder="单位秒"></el-input>
        </el-form-item>

        <!-- 报警类型 -->
        <el-form-item label="报警类型">
          <el-cascader
          :options="options"
          :props="props"
          v-model="formInline.cascader"
          collapse-tags
          clearable>
          </el-cascader>
        </el-form-item>

        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <!-- 导出 -->
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <div class="table-data">
        <el-table
          :data="tableData"
          stripe
          border
          height="370"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="handleU"
            label="处理上报"
            width="100">
          </el-table-column>
          <el-table-column
            prop="carP"
            label="车牌号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="company"
            label="所属公司"
            width="180">
          </el-table-column>
          <el-table-column
            prop="parkC"
            label="车牌颜色"
            width="100">
          </el-table-column>
          <el-table-column
            prop="linkM"
            label="联系人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="linkP"
            label="联系电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="alertT"
            label="报警类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="alertS"
            label="报警来源"
            width="180">
          </el-table-column>
          <el-table-column
            prop="startT"
            label="开始时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="endT"
            label="结束时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="alertL"
            label="报警时长"
            width="180">
          </el-table-column>
          <el-table-column
            prop="startS"
            label="开始速度（公里/时）"
            width="180">
          </el-table-column>
          <el-table-column
            prop="endS"
            label="结束速度（公里/时）"
            width="180">
          </el-table-column>
          <el-table-column
            prop="startP"
            label="开始位置"
            width="180">
          </el-table-column>
          <el-table-column
            prop="endP"
            label="结束位置"
            width="180">
          </el-table-column>
          <el-table-column
            prop="alertM"
            label="报警信息"
            width="180">
          </el-table-column>
          <el-table-column
            prop="reportS"
            label="上报状态"
            width="180">
          </el-table-column>
          <el-table-column
            prop="handleS"
            label="处理情况"
            width="180">
          </el-table-column>
          <el-table-column
            prop="handleC"
            label="处理内容"
            width="180">
          </el-table-column>
          <el-table-column
            prop="handleT"
            label="处理时间"
            width="180">
          </el-table-column>
        </el-table>
      </div>

      <!-- 选择车辆 -->
      <el-dialog title="选择车辆" :visible.sync="dialogCarVisible" width="500px">
        <car-list @option-car="optionCar" :isDialog="true"></car-list>
      </el-dialog>
    </div>
</template>

<script>
import reportApi from '@/api/report'
import {export_json_to_excel} from '@/public/Export2Excel'
import CarList from '@/views/carList'

  export default {
    components: {CarList},

    data() {
      return {
        formInline: {
          date: '',
          car: '',
          source: '全部',
          handle: '全部',
          state: '全部',
          time: '',
          cascader: []
        },
        tableData: [],
        dialogCarVisible: false,
        // 时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },

        props: { multiple: true },
        options: [{
          value: '全选',
          label: '全选',
          children: [{
            value: '超速报警',
            label: '超速报警',
            children: [{
              value: '超时停车报警',
              label: '超时停车报警'
            },{
              value: '超速报警',
              label: '超速报警'
            },{
              value: '超速预警',
              label: '超速预警'
            }]
          },{
            value: '视频报警',
            label: '视频报警',
            children: [{
              value: '视频信号丢失报警',
              label: '视频信号丢失报警'
            },{
              value: '视频信号遮挡报警',
              label: '视频信号遮挡报警'
            }]
          },{
            value: '硬盘报警',
            label: '硬盘报警',
            children: [{
              value: '硬盘错误报警',
              label: '硬盘错误报警'
            }]
          },{
            value: '故障报警',
            label: '故障报警',
            children: [{
              value: 'GNSS模块发生故障报警',
              label: 'GNSS模块发生故障报警'
            },{
              value: 'GNSS天线未接或被剪断报警',
              label: 'GNSS天线未接或被剪断报警'
            },{
              value: 'GNSS天线短路报警',
              label: 'GNSS天线短路报警'
            },{
              value: 'TTS模块故障',
              label: 'TTS模块故障'
            },{
              value: '摄像头故障',
              label: '摄像头故障'
            },{
              value: '车辆VSS故障',
              label: '车辆VSS故障'
            },{
              value: '道路运输IC卡模块故障',
              label: '道路运输IC卡模块故障'
            },{
              value: '终端LCD或者显示器故障',
              label: '终端LCD或者显示器故障'
            }]
          },{
            value: '操作报警',
            label: '操作报警',
            children: [{
              value: '紧急按钮报警',
              label: '紧急按钮报警'
            }]
          },{
            value: '油量报警',
            label: '油量报警',
            children: [{
              value: '车辆油量异常报警',
              label: '车辆油量异常报警'
            }]
          },{
            value: '其它报警',
            label: '其它报警',
            children: [{
              value: '振动报警',
              label: '振动报警'
            },{
              value: '危险驾驶行为报警',
              label: '危险驾驶行为报警'
            },{
              value: '终端主电源欠压报警',
              label: '终端主电源欠压报警'
            },{
              value: '终端主电源掉电报警',
              label: '终端主电源掉电报警'
            },{
              value: '当天累计驾驶超时',
              label: '当天累计驾驶超时'
            },{
              value: 'ACC报警',
              label: 'ACC报警'
            },{
              value: '超员',
              label: '超员'
            },{
              value: '烟感报警',
              label: '烟感报警'
            },{
              value: '异常驾驶',
              label: '异常驾驶'
            },{
              value: '特殊报警录像达到存储阀值报警',
              label: '特殊报警录像达到存储阀值报警'
            },{
              value: '其他视频设备故障报警',
              label: '其他视频设备故障报警'
            },{
              value: '氧气浓度低',
              label: '氧气浓度低'
            },{
              value: '设备上锁',
              label: '设备上锁'
            },{
              value: '设备开锁',
              label: '设备开锁'
            },{
              value: '车辆非法位移报警',
              label: '车辆非法位移报警'
            },{
              value: '车辆非法点火报警',
              label: '车辆非法点火报警'
            },{
              value: '车辆被盗报警',
              label: '车辆被盗报警'
            }]
          },{
            value: '围栏报警',
            label: '围栏报警',
            children: [{
              value: '区域超速报警',
              label: '区域超速报警',
            },{
              value: '进出区域',
              label: '进出区域',
            },{
              value: '进出路线报警',
              label: '进出路线报警',
            },{
              value: '路段行驶时间不足或过长',
              label: '路段行驶时间不足或过长',
            },{
              value: '路线偏离报警',
              label: '路线偏离报警',
            }]
          },{
            value: '安全辅助驾驶报警',
            label: '安全辅助驾驶报警',
            children: [{
              value: '疲劳驾驶报警',
              label: '疲劳驾驶报警'
            },{
              value: '手机警示',
              label: '手机警示'
            },{
              value: '抽烟警示',
              label: '抽烟警示'
            },{
              value: '面部疲劳',
              label: '面部疲劳'
            },{
              value: '疲劳驾驶预警',
              label: '疲劳驾驶预警'
            },{
              value: '前撞预警',
              label: '前撞预警'
            },{
              value: '车道偏移预警',
              label: '车道偏移预警'
            },{
              value: '胎压预警',
              label: '胎压预警'
            },{
              value: '侧翻预警',
              label: '侧翻预警'
            },{
              value: '违规行驶',
              label: '违规行驶'
            },{
              value: '右转盲区异常报警',
              label: '右转盲区异常报警'
            }]
          },{
            value: '平台报警',
            label: '平台报警',
            children: [{
              value: '夜间禁止行车报警（平台）',
              label: '夜间禁止行车报警（平台）'
            },{
              value: '区域超速报警（平台）',
              label: '区域超速报警（平台）'
            },{
              value: '区域低速报警（平台）',
              label: '区域低速报警（平台）'
            },{
              value: '进出入区域（平台）',
              label: '进出入区域（平台）'
            },{
              value: '路线偏移（平台）',
              label: '路线偏移（平台）'
            },{
              value: '时间段超速报警（平台）',
              label: '时间段超速报警（平台）'
            },{
              value: '时间段低速报警（平台）',
              label: '时间段低速报警（平台）'
            },{
              value: '疲劳驾驶（平台）',
              label: '疲劳驾驶（平台）'
            },{
              value: '超时停车（平台）',
              label: '超时停车（平台）'
            },{
              value: '关键点监控报警（平台）',
              label: '关键点监控报警（平台）'
            },{
              value: '线路超速报警（平台）',
              label: '线路超速报警（平台）'
            },{
              value: '线路低速报警（平台）',
              label: '线路低速报警（平台）'
            },{
              value: '道路等级超速报警（平台）',
              label: '道路等级超速报警（平台）'
            },{
              value: '定位异常（平台）',
              label: '定位异常（平台）'
            },{
              value: '夜间超速报警（平台）',
              label: '夜间超速报警（平台）'
            },{
              value: 'ACC信号异常报警（平台）',
              label: 'ACC信号异常报警（平台）'
            },{
              value: '位置信息异常报警（平台）',
              label: '位置信息异常报警（平台）'
            },{
              value: '车辆长时异常离线提醒（平台）',
              label: '车辆长时异常离线提醒（平台）'
            },]
          },{
            value: 'G-sensor报警',
            label: 'G-sensor报警',
            children: [{
              value: '碰撞侧翻报警',
              label: '碰撞侧翻报警'
            }]
          },{
            value: '自定义报警',
            label: '自定义报警',
            children: [{
              value: '自定义报警',
              label: '自定义报警'
            }]
          }]
        }]
      }
    },
    methods: {
      onSubmit() {
        // 获取报警选择框数据
        const alertArr = []
        const arr = this.formInline.cascader
        for(var i=0; i<arr.length; i++){
          alertArr.push(arr[i][arr[i].length-1])
        }
        console.log(alertArr)

        reportApi.getSixOfTwo(this.formInline).then(response => {
          const resp = response.data
          if(resp.flag){
            this.tableData = resp.data.rows
          }else{
            this.$message({
              message: resp.message,
              type: 'warning'
            })
          }
        })
      },

      // 导出EXCEL表格
      exportExcel(){
            require.ensure([], () => {
            const tHeader = ['处理上报', '车牌号', '所属公司', '车牌颜色', '联系人', '联系电话', '报警类型', '报警来源', '开始时间', '结束时间', '报警时长', '开始速度（公里/时）', '结束速度（公里/时）', '开始位置', '结束位置', '报警信息', '上报状态', '处理情况', '处理用户', '处理内容', '处理时间']
            const filterVal = ['handleU', 'carP', 'company', 'parkC', 'linkM', 'linkP', 'alertT', 'alertS', 'startT', 'endT', 'alertL', 'startS', 'endS', 'startP', 'endP', 'alertM', 'reportS', 'handleC', 'handleT']
            const list = this.tableData
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '警情查询')
            })
        },
        formatJson(filterVal, jsonData){
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

      optionCar(currentRow){
        console.log('parent', currentRow)
        console.log(currentRow.carP)
        this.formInline.car = currentRow.carP
        this.dialogCarVisible = false
      },
    }
  };
</script>

<style scoped>
.main{
    position: absolute;
    left: 250px;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
}
hr{
  padding: 0;
  margin: 0;
}
.el-form{
  padding: 20px 10px 10px 10px;
  background-color: #eee;
}
.table-data{
  width: 100%;
  height: 370px;
  overflow-x: auto;
  overflow-y: auto;
}
</style>